Merge data into client-side template
Description
Merge Javascript into a client-side template and set the inner HTML to the result.
Used with the UX component.
This action allows you to define a data and a template, merge the data into the template and then set the innerHTML of a div, placeholder control, or Panel with the resulting HTML.
When you open the builder, the genie shows this screen:
You can either specify static data to merge into the template, or you can specify the name of a Javascript function that will return the data to merge into the template. Similarly, you can specify a static template, or the name of a Javascript function that will dynamically create the template.
Template Data Properties
- Method for specifying the data
Specify if the data to be merged into the template is defined now, is obtained at run-time by calling a Javascript function, or is read from the current row in a List control Choices include Static, JavascriptFunction, List.
- Static data
Specify the JSON data to merge into the template.
- Javascript function for data
Specify the name of the Javascript function. This function must return an object, or an array of objects.
- List name
Specify the name of the List control from which the data to merge into the template will be read.
Template Definition Properties
- Sample data for use in template builder
(Optional) Since the data used by this action is obtained at run-time using a Javascript function, in order to see what fields are available in the Template Builder, you can specify some sample, representative, data now so that the Template Builder can show you the available fields in your data.
- Method for specifying the template
Specify if the template is defined now, or is obtained at run-time by calling a Javascript function. Choices include Static, JavascriptFunction.
- Template
Template property.
- Javascript for template
(Optional/Advanced) Your template can use Javascript functions for advanced features. You can define your template functions here, or by going to the Javascript Functions pane in the UX builder.
- Local CSS
Your template can custom CSS classes. These can either be defined here, in CSS defined in the 'Local CSS' property of the UX builder, or in CSS that is linked. This option allows you to specify the CSS here.
- Javascript function for template definition
Javascript function for template definition property.
Target Properties
- Type
Specify where the template should be shown after the data has been merged into it. Choices include Placeholder, Div, Panel.
- Placeholder name
Specify the Id of the placeholder where the rendered template should be shown. Choices include.
- Div
Specify the Id of the div where the rendered template should be shown.
- Panel
Specify the Id of the target Panel Card Choices include.
See Also